<template>
  <div class="login">
    <header class="nav">
      <img src="../assets/logo.png" alt="" class="logo" />
      <span class="title">一个登陆页面</span>
    </header>
    <main>
     
        <el-card class="box-card">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名:" prop="username">
              <el-input
                placeholder="请输入用户名"
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input
                placeholder="请输入密码"
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="submitForm('ruleForm')"
                class="log_in"
                >登录</el-button
              >
              <el-button
                type="warning"
                plain
                @click="resetForm('ruleForm')"
                class="sign_in"
                >注册</el-button
              >
              <el-link class="get_back" type="primary">找回密码</el-link>
            </el-form-item>
          </el-form>
        </el-card>

    </main>
    <footer>0.0版权</footer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent, ref } from "vue";

@Options({
  components: {},
  data() {
    var validatePass = (rule: any, value: any, callback: any) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule: any, value: any, callback: any) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validatePass, trigger: "blur" }],
        password: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName: any) {
      this.$refs[formName].validate((valid: any) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName: any) {
      this.$refs[formName].resetFields();
    },
  },
})
export default class login extends Vue {}
</script>
<style lang="less" >
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/bg.jpg");
  header {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: rgba(56, 158, 199, .5);
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    img {
      width: 30px;
      margin: 0 10px;
    }
  }
  main {
    width: 100%;
    height: 100%;

    .box-card {
      box-sizing: border-box;
      background-image: url("../assets/img/bg.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      padding: 30px;
      width: 480px;
      height: 300px;
      margin: 300px auto;
    }
    .get_back {
      font-style: none;
      margin-left: 10px;
    }
    .sign_in {
      margin: 0 33px;
    }
  }
  footer{
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: rgba(56, 158, 199, .5);
  }
}
</style> 